import React from "react";
// 导入axois
// import axios from 'axios'
import { API } from '../../utils/api';

// 导入NavBar组件
import { Toast } from 'antd-mobile';
// 导入react-virtualized组件
import { List, AutoSizer  } from 'react-virtualized';
// 引入样式
import './index.css'
// import styles from './AutoSizer.example.css';
// 导入utils中获取当前定位城市的方法
import { getCurrentCity } from '../../utils'
// 导入NavHeader组件
import NavHeader from '../../components/NavHeader/index'
// 数据格式化方法
const formatCityData= (list)=>{
        const cityList={};
        // const cityIndex=[];
        // 遍历list数据
       list.forEach(item => {
        // 获取每个城市的首字母
        const first=item.short.substr(0,1)
        // 判断list是否有分类
        if(cityList[first]){
            // 如果有直接将该分类push到数据中
            // cityList[first]=>[{},{},{}]
            cityList[first].push(item)
        }else{
            // 如果没有先创建一个数组，然后吧当前城市信息push到数组中
            cityList[first]=[item]
        }
    })
    // 获取索引数据
    const cityIndex = Object.keys(cityList).sort()
    return{
        cityList,
        cityIndex,
    }
}
// 索引 （A、B等）的高度
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50
// 封装处理字母索引的方法
const formatCityIndex = (letterIndex) => {
    switch (letterIndex) {
        case '#':
            return '当前定位'
        case 'hot':
            return '热门城市'
        default:
            return letterIndex.toUpperCase()
    }
}
// 有房源的城市
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']
export default class CityList extends React.Component{
    constructor(props){
        super(props)
        // 添加状态
        this.state = {
            cityList:{},
            cityIndex:[],
            // 默认指定当前高亮的索引号
            activeIndex:0
        }
        // 创建ref对象
        this.cityListComponent = React.createRef()
    }
    // 生命周期函数
    async componentDidMount(){
       await this.getCityList()
        // 调用 measureAllRows,提前计算 List 中每一行的高度，实现 scrollToRow的精确跳转
        this.cityListComponent.current.measureAllRows()
    }
    // 获取城市列表数据的方法
    async getCityList(){
        const res = await API.get(`/area/city?level=1`)
        const{cityList,cityIndex}= formatCityData(res.data.body)
        /**
         * 1.获取热门城市的数据
         */
        const resHot= await API.get('/area/hot')
        //  2.将数据添加到cityList中
        cityList['hot'] = resHot.data.body
        //  3.将索引添加到cityIndex中
        cityIndex.unshift('hot')
        // 获取当前定位的城市
        const curCity = await getCurrentCity()
        // 将当前定位上数据添加到cityList中
        cityList['#']=[curCity]
        // 将当前定位的索引添加到cityIndex中
        cityIndex.unshift('#')
        // console.log(cityList,cityIndex,curCity);
        // 更新数据
        this.setState({
            cityList,
            cityIndex
        })
    }
      // 城市切换的方法
    changeCity ({ label, value }){
        // 判断是否有房源数据
        if(HOUSE_CITY.indexOf(label) > -1){
            // 保存到本地
            localStorage.setItem('hkzf_city',JSON.stringify({ label,value }))
            this.props.history.go(-1)
        }else{
            Toast.info('该城市暂无房源数据', 2, null, false);
        }
    }
    // 渲染每一行数据的渲染函数
    rowRenderer = ({
        index, //索引号
        isScrolling, //当前项是否滚动
        isVisible, //当前项在list中可见的
        key, //当前项的key值
        style, //当前行的样式属性
    }) => {
        // 获取每一行的字母索引
       const { cityIndex,cityList } =this.state
       const letterIndex = cityIndex[index]
        return (
        <div key={key} style={style} className='city'>
                <div className='title'>{formatCityIndex(letterIndex)}</div>
                {
                    cityList[letterIndex].map(item => 
                    <div className='name' key={item.value} onClick={ () => this.changeCity(item)}>{item.label}</div>)
                }
        </div>
        )
    }
    // 创建动态计算每一行高度的方法
    getRowHeight = ({index}) => {
        // 索引标题高度 + 城市数量 + 城市名称的高度
        const { cityList, cityIndex } = this.state
        // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
        return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    }
    // 封装渲染右侧索引列表的方法
    renderCityIndex() {
        // 获取到 cityIndex,并遍历其实现渲染
       return this.state.cityIndex.map((item,index) =>
         <li className='city-index-item' key={item}
         onClick={() => {
             this.cityListComponent.current.scrollToRow(index)
         }}>
            <span className={this.state.activeIndex===index?'index-active':''}>
                {item==='hot'?'热':item.toUpperCase()}
            </span>
        </li>)
    }
    // 用于获取list组件渲染行的信息
    onRowsRendered = ({startIndex}) => {
        if(this.state.activeIndex!==startIndex){
            this.setState({
                activeIndex:startIndex
            })
        }
    }
    render() {
        return (
            <div className="citylist"> 
                {/* 顶部导航栏区域 */}
                {/* <NavBar className="navbar"
                    mode="light"
                    icon={<i className="iconfont icon-back"></i>}
                    onLeftClick={() => this.props.history.go(-1)}
                    >城市选择
                </NavBar> */}
                <NavHeader>城市选择</NavHeader>
                {/* 城市列表区域 */}
                <AutoSizer>
                    {({width, height}) => (
                    <List
                        ref={this.cityListComponent}
                        width={width}
                        height={height}
                        rowCount={this.state.cityIndex.length}
                        rowHeight={this.getRowHeight}
                        rowRenderer={this.rowRenderer}
                        onRowsRendered={this.onRowsRendered}
                        scrollToAlignment='start'
                        />
                    )}
                </AutoSizer>
                {/* 右侧索引列表 */}
                <ul className='city-index'>
                   {this.renderCityIndex() }
                </ul>
            </div>
        )
    }
}